<template>
  <div v-if="data._isInit">
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"> </el-input>
      </el-form-item>
      <el-form-item :label="$t('风格类型')">
        <l-select
          v-model="config.theme"
          :options="[
            { value: '1', label: '风格一' },
            { value: '2', label: '风格二' },
            { value: '3', label: '风格三' },
          ]"
        />
      </el-form-item>
      <el-form-item v-if="config.theme != '2'" :label="$t('描述')">
        <el-input v-model="config.des"> </el-input>
      </el-form-item>

      <template v-if="config.theme == '3'">
        <el-form-item :label="$t('标题1')">
          <el-input v-model="config.valueTitle1"> </el-input>
        </el-form-item>
        <el-form-item :label="$t('标题2')">
          <el-input v-model="config.valueTitle2"> </el-input>
        </el-form-item>
      </template>

      <el-form-item :label="$t('数据颜色')">
        <l-input-color v-model="config.numColor" />
      </el-form-item>

      <template v-if="config.theme != '3'">
        <el-form-item v-if="config.theme != '2'" :label="$t('图标类型')">
          <l-select
            v-model="config.showType"
            :options="[
              { value: 'icon', label: '图标' },
              { value: 'img', label: '图片' },
              { value: 'none', label: '无' },
            ]"
          />
        </el-form-item>
        <template v-if="config.showType == 'icon'">
          <el-form-item :label="$t('图标选择')">
            <l-input-icon v-model="config.icon" />
          </el-form-item>
          <el-form-item :label="$t('图标颜色')">
            <l-input-color v-model="config.iconColor" />
          </el-form-item>
        </template>
        <el-form-item
          v-if="config.showType == 'img' || config.theme == '2'"
          :label="$t('图片上传')"
          style="margin-bottom: 8px"
        >
          <l-img-select v-model="config.imgId" />
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('数据配置')" name="2">
      <el-form-item :label="$t('数据视图')">
        <l-dbsource-select
          v-model="config.dataCode"
          @change="handleDataSourceChange"
          @init="handleDataSourceInit"
        />
      </el-form-item>
      <el-form-item :label="$t('主指标')">
        <l-select v-model="config.valueKey" :options="fieldOptions" />
      </el-form-item>
      <el-form-item v-if="config.theme == '3'" :label="$t('主指标2')">
        <l-select v-model="config.valueKey1" :options="fieldOptions" />
      </el-form-item>
      <el-form-item v-if="config.theme != '2'" :label="$t('副指标')">
        <l-select v-model="config.subValueKey" :options="fieldOptions" />
      </el-form-item>
      <el-form-item v-if="config.theme != '2'" :label="$t('标记')">
        <l-select v-model="config.flagKey" :options="fieldOptions" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('交互设置')" name="3">
      <div style="padding: 10px 0">
        <el-form-item :label="$t('跳转功能')">
          <l-tree-select :options="modulesTree" v-model="config.moduleId" />
        </el-form-item>
        <div class="mt-8">
          <el-button
            class="ml-8"
            type="primary"
            size="mini"
            @click="handleSettingCondition"
            >{{ $t('设置跳转条件') }}</el-button
          >
        </div>
      </div>

      <l-dialog
        title="设置跳转条件"
        :visible.sync="formVisible"
        :height="528"
        :width="720"
        @ok="handleSave"
        @close="handleCloseForm"
        @opened="handleOpenedForm"
      >
        <my-form ref="form"></my-form>
      </l-dialog>
    </el-collapse-item>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import configMixins from "../mixins/config";
import MyForm from "../conditionForm.vue";
export default {
  mixins: [configMixins()],
  components: {
    MyForm,
  },
  data() {
    return {
      formVisible: false,
    };
  },
  computed: {
    ...mapGetters(["modules"]),
    myModules() {
      //if(this.loginInfo.f_SecurityLevel == 1){
      return this.modules.filter(
        (t) => t.f_EnabledMark == 1 && t.f_Target.indexOf("desktop") == -1
      );
      //}
      /*return this.modules.filter(item =>{
                if(item.f_EnabledMark == 1 && item.f_Target.indexOf('desktop') == -1){
                    const moduleAuthIds = this.loginInfo.moduleAuthIds || []
                    if(moduleAuthIds.indexOf(item.f_ModuleId) > -1){
                        return true
                    }
                    else{
                        return false
                    }
                }
                else{
                    return false
                }
            })*/
    },
    modulesTree() {
      const res = this.$toTree(
        this.myModules,
        "f_ModuleId",
        "f_ParentId",
        "f_ModuleId",
        "f_FullName"
      );
      return res.filter((t) => t.f_ParentId == "0");
    },
  },
  methods: {
    init(data) {
      const config = {
        showType: "none",

        dataCode: "",
        valueKey: "",
        subValueKey: "",
        flagKey: "",

        moduleId: "",

        theme: "1",
      };
      this.commonInit(data, config);
    },
    clearKeys() {
      this.config.valueKey = "";
      this.config.subValueKey = "";
      this.config.flagKey = "";
    },

    // 设置功能跳转条件
    handleSettingCondition() {
      if (this.config.moduleId) {
        const module = this.modules.find(
          (t) => t.f_ModuleId == this.config.moduleId
        );
        if (module.f_Target == "custmerForm") {
          this.formVisible = true;
        } else {
          this.$message({
            type: "warning",
            message: this.$t("目前只支持自定义表单功能设置条件!"),
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: this.$t("请设置跳转功能!"),
        });
      }
    },
    async handleSave() {
      if (this.$refs.form.validateForm()) {
        this.config.conditionInfo = this.$refs.form.getForm();
        this.formVisible = false;
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    handleOpenedForm() {
      this.$refs.form.setForm(this.config.moduleId, this.config.conditionInfo);
    },
  },
};
</script>

